<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'verify' }">总览</el-breadcrumb-item>
      <el-breadcrumb-item>用户</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button
        class="filter-item"
        style="float: right"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        >创建新用户</el-button
      >
      <el-table
        ref="multipleTable"
        :data="list"
        :stripe="true"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          prop="uid"
          label="序号"
          width="auto"
          align="center"
          :resizable="false"
          type="index"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="工号"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.snumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sname }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.uname }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              circle
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="创建新用户" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="用户名" prop="uname">
          <el-input v-model="temp.uname" />
        </el-form-item>

        <el-form-item label="密码" prop="upassword">
          <el-input v-model="temp.upassword" />
        </el-form-item>

        <el-form-item label="员工" prop="sid">
          <el-select v-model="temp.sid" class="filter-item" style="float: left">
            <el-option
              v-for="item in staffs"
              :key="item.snumber"
              :value="item.sid"
              :label="item.sname"
            >
              <span>{{ item.snumber }} - {{ item.sname }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
      },

      temp: {},
      dialogFormVisible: false,
      dialogStatus: "",
      rules: {
        uname: [{ required: true, message: "姓名为必填项", trigger: "blur" }],
        upassword: [
          { required: true, message: "密码为必填项", trigger: "blur" },
        ],
        sid: [{ required: true, message: "员工为必填项", trigger: "blur" }],
      },

      list: null,
      staffs: null,
      listLoading: true,
      delete: [],
      multipleSelection: [],
    };
  },
  created() {
    this.refreashInfo();
  },
  methods: {
    refreashInfo() {
      this.getList();
      this.getStaff();
    },
    getList() {
      const that = this;
      this.listLoading = true;

      this.$axios({
        method: "get",
        url: "/api/user",
        params: this.listQuery,
      }).then(function (res) {
        that.list = res.data.data;
        that.total = res.data.total;
        that.listLoading = false;
      });
    },
    getStaff() {
      const that = this;
      this.$axios({
        method: "get",
        url: "/api/staff",
        params: this.listQuery,
      }).then(function (res) {
        that.staffs = res.data.data;
      });
    },
    resetTemp() {
      this.temp = {
        uname: "",
        upassword: "",
        upower: 1,
      };
    },
    handleCreate() {//创建
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    handleDelete(row) {//删除
      const that = this;
      this.$confirm("确定删除此用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      }).then(() => {
        this.$axios({
          method: "delete",
          url: "/api/user/" + row.uid,
        })
          .then(function () {
            that.refreashInfo();
            that.$message({
              type: "success",
              message: "删除成功",
            });         
          })
          .catch(() => {
            that.$message({
              type: "error",
              message: "删除失败",
            });
            this.dialogFormVisible = false;
          });
      });
    },
    toggleSelection() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.tableData.splice(this.multipleSelection[i].id, 1);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.limit + index + 1;
    },

    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const that = this;
          this.$axios({
            method: "post",
            url: "/api/user",
            data: this.temp,
          })
            .then(function (res) {
              if (res.data.msg == "成功") {
                that.$message({
                  type: "success",
                  message: "新建用户成功",
                });
              } else {
                that.$message({
                  type: "error",
                  message: "添加失败",
                });
              }
              that.refreashInfo();
            })
            .catch(() => {
              that.$message({
                type: "error",
                message: "添加失败",
              });
            });
          this.dialogFormVisible = false;
        }
      });
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
.filter-container {
  display: flex;
  margin-bottom: 0.5rem;
}
</style>